<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="pragma" content="no-cache">
    <META http-equiv="cache-Control" content="no-cache,no-store, must-revalidate">  
    <title>跑么杯证书</title>
    <link rel="stylesheet" type="text/css" media="screen" href="{$staticHost}/static/css/base.css?v=10" />
    <link rel="stylesheet" type="text/css" media="screen" href="{$staticHost}/static/css/swiper-3.3.1.min.css?v=10" />
    <link rel="stylesheet" type="text/css" media="screen" href="{$staticHost}/static/css/run.css?v=130" />
    <script src="{$staticHost}/static/js/jquery.min.js"></script>
    <script src="{$staticHost}/static/js/js.js"></script>
    <script src="{$staticHost}/static/js/swiper-3.3.1.jquery.min.js"></script>
</head>

   
<body>
 <div class="swiper-container">
  <div class="swiper-wrapper" id="box"></div>
  <div class="swiper-pagination"></div>
 </div>  
<script id="data-box" type="text/html">

<%for(var i=0; i< result.certificate.length;i++){%>
  <section class="pr swiper-slide" >
    <%if(result.certificate[i].type!=100&&result.certificate[i].type!=5){%>
    <div class="medall medal-box medal-hbg"></div>
    <%}else if(result.certificate[i].type!=1&&result.certificate[i].type!=5){%>
    <div class="medall medal-box medal-bg"></div>
    <%}else{%>
    <div class="medall medal-box medal-ebg"></div>

    <%}%>
    <section class="pao-certificate zs-bg <%if(result.certificate[i].type!=100){%>red-border<%}else{%>blue-border<%}%>">
      <section class="content">
        <img class="medal" src="{$staticHost}/static/images/img/<%if(result.certificate[i].type!=100){%>paohj<%}else{%>paoj<%}%>.png">
        <p class="ac f16 pao-blue"><%=result.certificate[i].clubName%></p>
        <%if(result.certificate[i].type==100){%>
          <section class="zs-data">
            第<%=result.certificate[i].rank_num%>名<br/>
            <span>总积分</span>
            <b><%=result.certificate[i].rank_value%></b>
            <%if(result.certificate[i].type==100){%>
              <p class="jf-data">
              跑量积分<%=result.certificate[i].mileage_score%>
              配速积分<%=result.certificate[i].speed_score%>
              人气积分<%=result.certificate[i].support_score%>
              </p>
            <%}%>
          </section>
        <%}else{%>
          <section class="zs-data">
            第<%=result.certificate[i].rank_num%>名<br/>
            <span>总里程</span><br/>
            <b><%=result.certificate[i].rank_value%></b>
          </section>
        <%}%>

        <p class="ac f14">战队明星成员</p>
        <div class="img_list">
          <img src="<%=result.certificate[i].starUser.leader.header%>"/>
          <%if(result.certificate[i].type!=100){%>
          <%if(result.certificate[i].starUser.mile.header){%>
            <img src="<%=result.certificate[i].starUser.mile.header%>"/>
          <%}%>
          <%if(!result.certificate[i].starUser.mile.header){%>
            <img src="{$staticHost}/static/images/4.jpg"/>
          <%}%>

          <%if(result.certificate[i].starUser.onceMile.header){%>
            <img src="<%=result.certificate[i].starUser.onceMile.header%>"/>
          <%}%>
          <%if(!result.certificate[i].starUser.onceMile.header){%>
            <img src="{$staticHost}/static/images/4.jpg"/>
          <%}%>
          <%}%>
          <%if(result.certificate[i].starUser.speed.header){%>
            <img src="<%=result.certificate[i].starUser.speed.header%>"/>
          <%}%>
          <%if(!result.certificate[i].starUser.speed.header){%>
            <img src="{$staticHost}/static/images/4.jpg"/>
          <%}%>

          <%if(result.certificate[i].starUser.support.header){%>
          <img src="<%=result.certificate[i].starUser.support.header%>"/>
          <%}%>
          <%if(!result.certificate[i].starUser.support.header){%>
            <img src="{$staticHost}/static/images/4.jpg"/>
          <%}%>


        </div>
        <p class="acquisition">
          <img src="{$staticHost}/static/images/img/paoline.png">
          您还获得
          <img src="{$staticHost}/static/images/img/paoline.png">
        </p>
        <ul class="acquisition-list">
          <li><i></i>勋章 </li>
          <li><i class="icon-zs"></i>冠军证书 </li>
          <%if(result.certificate[i].type==100){%>
            <li><i class="icon-jp"></i>奖牌 </li>
          <%}%>
        </ul>
      </section>
    </section>
  </section>
<%}%>
</script>

<script type="text/javascript">
$(function(){

   $.get("{$staticHost}/paome_webIndex/getClubCertificate?clubId={$clubId}", {}, function(data, error) {
      data=JSON.parse(data);
      var info = data.result.certificate
      var html = template('data-box', data);
      document.getElementById('box').innerHTML = html;
      var screenHeight = document.body.scrollWidth;
      screenHeight = Number(screenHeight)-128;
      if(screenHeight>568&&screenHeight<=670){
        $(".medal").css({"width":"90%","margin":"18% auto 8%"})
        $(".img_list").css("margin","2% 0")
        $(".img_list img").css({"transform":"scale(1.1)","margin":"10px 2%"})
        $(".medall").removeClass('medal-box,medal-boxp')
        $(".medall").addClass('medal-boxl')
      }else if(screenHeight>667){
        $(".medal").css({"width":"95%","margin":"22% auto 6%"})
        $(".img_list").css("margin","5% 0")
        $(".img_list img").css({"transform":"scale(1.2)","margin":"10px 4%"})
        $(".medall").removeClass('medal-box,medal-boxl')
        $(".medall").addClass('medal-boxp')
      }
    })
    
     var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        cancelable:false
    });

})
</script>
</body>
